<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {

        var colModel = [
            { title: "Customer ID", dataIndx: "customerid", width: 100 },
            { title: "Company Name", width: 180, dataIndx: "companyname", copy:false },
            { title: "Contact Name", width: 140, dataIndx: "contactname" },
            { title: "Contact Title", width: 140, dataIndx: "contacttitle" },
		    { title: "Address", width: "170", dataIndx: "address" }
		];
        var dataModel = {
            recIndx: "customerid",
            location: "remote",
            sorting: "local",            
            dataType: "JSON",
            method: "GET",
            sortIndx: "contactname",
            sortDir: "up",
            url: "/pro/customers/get"
            , getData: function (dataJSON) {                
                return { data: dataJSON.data };
            }
        }
        var newObj = {
            height: 'flex',
            scrollModel: { autoFit: true },
            dataModel: dataModel,
            showTitle: false,            
            showBottom: true,            
            toolbar: {
                cls: 'pq-toolbar-export',
                items: [{
                        type: 'button',
                        label: "Export to Excel",
                        icon: 'ui-icon-document',
                        listeners: [{
                            "click": function (evt) {
                                $("#grid_export").pqGrid("exportExcel", { url: "/pro/demos/excel", sheetName: "pqGrid sheet" });
                            }
                        }]
                }]
            },
            pageModel: {type:'local'},
            colModel: colModel,
            selectionModel: { all: true },
            copyModel: {header:true},
            editable: true,
            scrollModel: { horizontal: false },
            title: "Contact Details"
        };
        var $grid = $("#grid_export").pqGrid(newObj);
    });
        
</script>    
</head>
<body>

<div id="grid_export" style="margin: auto;">
    </div>

</body>

</html>
